<!--
 * @Description: 底部第二个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: 18222335065 2369811390@qq.com
 * @LastEditTime: 2022-09-07 20:13:21
-->
<template>
  <div ref="container" style="height: 95%"></div>
</template>

<script>
import { Column } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    loadColumn() {
      fetch(
        "https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json"
      )
        .then((data) => data.json())
        .then((data) => {
          const stackedColumnPlot = new Column(this.$refs['container'], {
            data,
            isStack: true,
            xField: "year",
            yField: "value",
            seriesField: "type",
            label: {
              // 可手动配置 label 数据标签位置
              position: "middle", // 'top', 'bottom', 'middle'
              // 可配置附加的布局方法
              layout: [
                // 柱形图数据标签位置自动调整
                { type: "interval-adjust-position" },
                // 数据标签防遮挡
                { type: "interval-hide-overlap" },
                // 数据标签文颜色自动调整
                { type: "adjust-color" },
              ],
            },
          });

          stackedColumnPlot.render();
        });
    },
  },
  created() {},
  mounted() {
    this.loadColumn()
  },
};
</script>
<style scoped>
</style>